In this assignment, you will write an application that uses Ajax to dynamically update a web page.
Create a new Tomcat6-based Dynamic Web Application project in J2EE Eclipse named <yourname>-lab8.
Create a weather.html form that allows a user to enter a up to 5 zip codes.
The form must provide a button, that, when pressed, causes an asynchronous Ajax request to be sent to a java-based WeatherService servlet (already written for you) which will return a JSON response containing the status of the request along with the current weather conditions for the specified zip codes.
Each JSON response will contain a large amount of information pertaining to the weather at the given zip code. In the weather.html file, you will have a function that is called by Ajax when the JSON response is received asynchronously. Your implementation of this function must extract only part of this information (you'll have to study the JSON response while developing your code), and display it in table form, as shown below:
The script within the weather.html file must issue an asynchronous Ajax request to be sent to the java-based AjaxWeatherServlet (which you must complete from the file provided below) which returns a JSON string containing the weather data. Some of the code for this class is already provided for you: the AjaxWeatherServlet uses a free Yahoo web service to retrieve weather information from a Yahoo server via a Yahoo Query Language (YQL) query. Within this class, the request parameters you pass to the servlet are enumerated, and the zip codes are extracted and passed on to Yahoo. The response from Yahoo is examined for success or failure, and the JSON response is created and returned.
The raw JSON string returned by the servlet can be seen if you enter the following url into your browser's address bar:
This is the success response for a single zip code (53202). To retrieve information for multiple zipcodes, the url would be localhost:8080/WeatherReport/weather.do?zipcode=53202&zipcode=97202&zipcode=asdfd&zipcode=60001.
In the weather.html file, you will implement a function (e.g. "handleSuccess()" ) that executes when the ajax response is successfully received . You will supply the zipcodes as parameters to the ajax request, following the url pattern above. The handleSuccess function has a jsonResponse parameter that is the javascript object that is automatically created from the returned JSON string (the ajax() function automatically "inflates" the serialized JSON string into this object).
Note the last part of the JSON response above ("status": "ok") : this contains the status of result in this case for a successful call. The status value (in this case "ok") can be retrieved simply as jsonResponse.status.
Similarly, the city corresponding to the specified zip code can be retrieved as jsonResponse.forecasts[index].weather.query.results.channel.location.city. You'll have to determine exact expression to return the other values. How? As you develop your handleSuccess() function, place a breakpoint in the function so that you can look at the jsonResponse object in the javascript debugger in your browser. You'll be able to determine the hierarchy of the object from there.
The index variable above indicates the specific forecast: say you supply 5 zip codes; index 0 is the first zip code, index 1 is the second, etc.
You will need to extract the following information from the jsonResponse object:
 | status |
| zipcode |
| city |
| region (i.e. state) |
| temperature (temp attribute of condition) |
| current condition (text attribute of condition) |
| humidity |
| sunrise |
| sunset |
| weather image |
The weather image is actually a url you extract from the string contained in jsonResponse.forecasts[index].weather.query.results.channel.item.description. You'll have to extract just the url of the image from this string, and place that url in the table element so that it can be rendered.
There are several types of errors you will have to handle:
1) If you pass an non-existent or invalid zipcode in the ajax request to the servlet, you'll still get a JSON response, but one of the forecast sub-objects of the jsonResponse will contain an error indication. You can detect such error indications by checking to see if jsonResponse.forecasts[index].weather.query.results.channel.location is undefined or not. When it is undefined, you should fill the table row corresponding to the invalid zipcode with dashes (or asterisks or similar) as shown above.
2) If the servlet cannot communicate to the Yahoo weather service, jsonResponse.status will not be "ok". You must detect such errors and report them:
3) If your servlet goes offline, the ajax() function will fail, and an error handler (e.g. "handleError") will be invoked instead of handleSuccess. You must also handle those errors by reporting the
When you have finished,
1. Deploy your application to the sapphire server via this Tomcat Web Manager Application link. (Note: you need to either use a VPN or be on-campus to be allowed to access the sapphire server over the network). At the bottom of the Tomcat Web Manager page, you'll see a Deploy section with two forms (Deploy Directory... and WAR file to deploy). Use the War file to deploy form to browse to the location on your local PC filesystem where you created the .war file containing your web application. Note: You create the .war file from within Eclipse by selecting your project and choosing the Export... command from either the main File menu or the context-menu that appears when you right-click on your project. Use the username and password supplied in class in order to login to the Tomcat Web Manager app.
2. zip your Eclipse src and WebContent folders (NOT the entire project folder) and submit it to Blackboard.